import React from 'react';
import { Row, Col, Form, Input, Button, Modal, Popconfirm, message } from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams';
import CurrencySelect from '../../../components/commons/CurrencySelect';
const FormItem = Form.Item;

export default Form.create({ wrappedComponentRef: true })(class SubBankAccount extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			open: false,
			customerId: undefined,
			customerName: undefined,
			cstNameEn: undefined
		}
	}

	handleCancel = () => {
		this.props.form.resetFields();
		this.setState({ open: false });
	}

	handleOpen = () => this.setState({ open: true, customerId: undefined, customerName: undefined, cstNameEn: undefined });

	handleCheckCustomer = () => {
		let values = this.props.form.getFieldsValue();
		if (values && values.customerNo) {
			this.props.dispatch({
				type: 'customerBank/getCustomerByNameOrCode',
				payload: {
					nameOrCode: values.customerNo,
					onSuccess: (customer) => {
						this.setState({ customerId: customer.id, customerName: customer.companyname, cstNameEn: customer.companynameen });
						message.info(`客户匹配成功，当前匹配的客户为，中文名：${customer.companyname}，英文名：${customer.companynameen}`);
					}
				}
			})
		} else {
			message.info("请先输入客户编号");
		}
	}

	handleConfirm = () => {
		this.props.form.validateFields((errors, values) => {
			if (errors) return;
			if (!this.state.customerId && !this.props.dataSource.mappingId) {
				message.error("请先点击校验客户号以确保输入客户号的正确性");
				return;
			}
			this.props.dispatch({
				type: this.props.dataSource.mappingId ? 'customerBank/updateBankSubAccount' : 'customerBank/createBankSubAccount',
				payload: {
					mappingId: this.props.dataSource.mappingId,
					customerId: this.state.customerId,
					bankId: values.bankId,
					currency: values.currency,
					addMsg: values.addMsg,
					cstNameEn: values.cstNameEn,
					onSuccess: () => {
						this.handleCancel();
						if (this.props.refreshList) this.props.refreshList();
					}
				}
			})
		})
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		let footer = [
			<Popconfirm onConfirm={this.handleConfirm.bind(this, true)} cancelText="否" okText="是" key="ok"
				placement="leftTop" title={'本功能为创建银企直联子账户，数据实时同步到银行方，请认真检查关联客户，银行是否正确！'}>
				<Button key="confirm" size="large">确定</Button>
			</Popconfirm>,
			<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>
		];
		return (
			<Modal visible={this.state.open} title={this.props.dataSource.mappingId ? "修改银企直联子账户" : "创建银企直联子账户"} width={500}
				footer={footer} onOk={this.handleConfirm} onCancel={this.handleCancel}>
				<Form>
					<Row style={{ display: !this.props.dataSource.mappingId ? "block" : "none" }}>
						<Col span={15} >
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="客户编号" hasFeedback>
								{getFieldDecorator('customerNo', {
									rules: [{
										required: !this.props.dataSource.mappingId, message: '请输入完整客户编号'
									}],
								})(
									<Input />
									)}
							</FormItem>
						</Col>
						<Col><Button key="check" size="large" onClick={this.handleCheckCustomer.bind(this)}>校验客户号</Button></Col>
					</Row>
					<Row style={{ display: !this.props.dataSource.mappingId ? "block" : "none" }}>
						<Col span={15}>
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="客户名称" hasFeedback>
								{getFieldDecorator('customerName', {
									initialValue: this.state.customerName
								})(
									<Input disabled />
									)}
							</FormItem></Col>
					</Row>
					<Row>
						<Col span={15}>
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="客户英文名称" hasFeedback>
								{getFieldDecorator('cstNameEn', {
									initialValue: this.props.dataSource.mappingId ? this.props.dataSource.cstNameEn : this.state.cstNameEn
								})(
									<Input maxLength="30" placeholder="用于对外收款，不得超过30个字符"/>
									)}
							</FormItem></Col>
					</Row>
					<Row style={{ display: !this.props.dataSource.mappingId ? "block" : "none" }}>
						<Col span={15}>
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="所属银行" hasFeedback>
								{getFieldDecorator('bankId', {
									rules: [{
										required: !this.props.dataSource.mappingId, message: '请选择所属银行'
									}]
								})(
									<BizParams sprCode={"serviceBank"} style={{ width: '100%' }} />
									)}
							</FormItem></Col>
					</Row>
					<Row style={{ display: !this.props.dataSource.mappingId ? "block" : "none" }}>
						<Col span={15}>
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="主账号币种" hasFeedback>
								{getFieldDecorator('currency', {
									rules: [{
										required: !this.props.dataSource.mappingId, message: '请选择币种'
									}]
								})(
									<CurrencySelect />
									)}
							</FormItem></Col>
					</Row>
					<Row>
						<Col span={15}>
							<FormItem {...{ labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 15 } } }} label="银行交易附言" hasFeedback>
								{getFieldDecorator('addMsg', {
									initialValue: this.props.dataSource.addMsg,
									rules: [{
										required: true, message: '请填写交易附言'
									}]
								})(
									<Input maxLength="100" placeholder="出口商品大类，例：出口服装"/>
									)}
							</FormItem></Col>
					</Row>
				</Form>
			</Modal>
		);
	}
})